<template>
  <view class="swiper_wrap" v-if="goods.goods_id">
    <!-- 1.0 轮播图 -->
    <swiper autoplay circular indicator-dots>
      <swiper-item
        v-for="item in goods.pics"
        :key="item.pics_id"
        @click="previewImage(item.pics_mid_url)"
      >
        <img :src="item.pics_mid" mode="aspectFit" />
      </swiper-item>
    </swiper>

    <!-- 2.0 价格/产品名称 -->
    <view class="goods_info">
      <view class="price">
        <view>
          ￥<text class="price_num">
            {{ goods.goods_price }}
          </text>
        </view>

        <view class="other">
          <!-- 转发 -->
          <view class="btnItem">
            <view class="iconfont icon-yixianshi-"></view>
            <button open-type="share"></button>
          </view>

          <!-- 收藏 -->
          <view class="iconfont icon-shoucang"></view>
        </view>
      </view>

      <view class="title">
        {{ goods.goods_name }}
      </view>
    </view>

    <!-- 3.0 图文详情 -->
    <view class="goods_details">
      <view class="details_title">图文详情</view>
      <view class="details_content">
        <rich-text :nodes="goods.goods_introduce"></rich-text>
      </view>
    </view>

    <!-- 4.0 底部栏 -->
    <view class="goods_tool">
      <view class="service item">
        <view class="iconfont icon-kefu"></view>
        联系客服
        <button open-type="contact"></button>
      </view>
      <navigator open-type="switchTab" url="/pages/cart/index">
        <view class="cart item">
          <view class="iconfont icon-gouwuche"></view>
          购物车
        </view>
      </navigator>
      <view class="cartAdd" @click="goodsAdd">
        加入购物车
      </view>
      <view class="buyNow">
        立即购买
      </view>
    </view>
  </view>
</template>

<script>
/*
加入购物车功能
 1 获取缓存中的历史数据(可能有真实的数据，也可能没有，默认值 "" []) 返回的类型都是数组
 2 判断 当前的商品是否存在于数组中
  1 不存在 
    表示第一次购买，在数组中 添加一个新元素 - 商品
  2 存在
    表示多次购买，需要找到数组中的元素 修改它的属性 购买数量的属性 自增
  3 把修改后的数组  重新添加到缓存中
*/

export default {
  data() {
    return {
      goods: null // 商品详情数据
    };
  },
  onLoad(options) {
    this.getDetails(options.good_id || "47868");
  },
  methods: {
    // 获取商品的详情数据
    async getDetails(id) {
      const res = await this.request({
        url: "/goods/detail",
        data: {
          goods_id: id
        }
      });

      this.goods = res;

      console.log(this.goods);
    },

    // 预览图片，放大预览
    previewImage(current) {
      const urls = this.goods.pics.map(v => v.pics_mid_url);

      uni.previewImage({
        current, // 当前显示图片的http链接
        urls // 需要预览的图片http链接列表
      });
    },

    // 加入购物车
    goodsAdd() {
      // 先获取缓存中的历史数据
      const carts = uni.getStorageSync("carts") || [];

      // 判断所选商品是否已经存在于数组中
      const index = carts.findIndex(
        goods => goods.goods_id === this.goods.goods_id
      );

      if (index === -1) {
        // 没有购买过
        this.goods.count = 1;
        carts.push(this.goods);
      } else {
        // 能找到购买过的记录
        carts[index].count++;
      }

      // 把修改后的数组  重新添加到缓存中
      uni.setStorageSync("carts", carts);

      uni.showToast({
        title: "加入成功",
        mask: true
      });
    }
  }
};
</script>

<style lang="scss">
.swiper_wrap {
  swiper {
    height: 78vw;
    text-align: center;
    swiper-item {
      padding: 50rpx;
    }
  }

  .goods_info {
    padding: 20rpx 30rpx 40rpx 30rpx;

    .price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: $uni-theme-color;
      .price_num {
        font-size: 36rpx;
      }

      .other {
        display: flex;

        .btnItem {
          display: flex;
          position: relative;
          .icon-yixianshi- {
            font-size: 44rpx;
            margin-right: 20rpx;
            font-weight: 600;
          }

          button {
            width: 100%;
            height: 100%;
            z-index: 100;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
          }
        }

        .icon-shoucang {
          font-size: 44rpx;
        }
      }
    }

    .title {
      font-weight: 600;
      word-break: break-all;
      margin-top: 10rpx;
      @include ellipsis(2);
    }
  }

  .goods_details {
    padding-bottom: 61rpx;

    .details_title {
      padding: 0rpx 20rpx 20rpx 30rpx;
      color: $uni-theme-color;
      font-size: 32rpx;
      font-weight: 600;
    }
  }

  .goods_tool {
    display: flex;
    padding: 20rpx 30rpx;
    border-top: 1px solid #666;
    background-color: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;

    .item {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
    }

    .service {
      position: relative;
      .icon-kefu {
        font-size: 44rpx;
      }
      button {
        width: 100%;
        height: 100%;
        z-index: 100;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    .cart {
      .icon-gouwuche {
        font-size: 44rpx;
      }
    }

    .cartAdd {
      flex: 3;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      background: #fcaa23;
      color: #fff;
      border-radius: 35rpx;
      margin: 0rpx 20rpx;
    }

    view.buyNow {
      flex: 3;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      background: #ea4350;
      color: #fff;
      border-radius: 35rpx;
    }
  }
}
</style>